from dash import Dash, html

# 创建 Dash 应用
app = Dash(__name__)

# 定义应用的布局
app.layout = html.Div(
    style={
        "fontFamily": "Arial, sans-serif",  # 设置全局字体
        "padding": "20px",  # 设置全局内边距
        "maxWidth": "800px",  # 设置最大宽度
        "margin": "0 auto",  # 居中显示
    },
    children=[
        # 标题
        html.H1(
            "Dash 示例应用",
            style={
                "color": "white",
                "backgroundColor": "darkblue",
                "padding": "10px",
                "borderRadius": "5px",
                "textAlign": "center",  # 文字居中
            },
        ),
        # 段落
        html.P(
            "这是一个简单的 Dash 应用示例，展示了如何使用 HTML 组件和样式。",
            style={"fontSize": "16px", "color": "#333", "marginTop": "20px"},
        ),
        # 带样式的 Div
        html.Div(
            children="这是一个带样式的 Div",
            style={
                "color": "white",
                "backgroundColor": "blue",
                "padding": "10px",
                "borderRadius": "5px",
                "marginTop": "20px",
                "textAlign": "center",
            },
        ),
        # 按钮
        html.Button(
            "点击我",
            style={
                "backgroundColor": "green",
                "color": "white",
                "border": "none",
                "padding": "10px 20px",
                "borderRadius": "5px",
                "cursor": "pointer",
                "marginTop": "20px",
            },
        ),
        # 图片
        html.Img(
            src="https://dash.plotly.com/assets/images/language_icons/python_50px.svg",
            style={
                "height": "50px",
                "marginTop": "20px",
                "display": "block",  # 图片居中
                "marginLeft": "auto",
                "marginRight": "auto",
            },
        ),
    ],
)

# 运行应用
if __name__ == "__main__":
    app.run(debug=True, port=8090)
